// @ts-nocheck
import "@common/css/reset.scss";
import "./index.scss";

declare let $: any;
declare let layer: any;
// declare let Canvas: any;

// @ts-nocheck

export default $(function () {
  let dom = null;
  // $("#preview").on("click", function () {
  //   dom.attr("class", $(this).find("img").attr("class"))
  //   $(this).fadeOut(200, function () {
  //     $(this).find("img").removeAttr("class");
  //     rotateIndex = 0
  //   });
  // });

  class RotateImg {
    canvasId: string;
    constructor(configs: {}) {
      this.configs = configs;
      configs.image = new Image();
      configs.image.src = configs.img
      // configs.context = null;
      configs.image.onload = function () {
        configs.width = this.naturalWidth;
        configs.height = this.naturalHeight;
        $(`#${configs.canvasId}`).attr("width", configs.width)
        $(`#${configs.canvasId}`).attr("height", configs.height)
        // $("#canvas-borad").attr("width", configs.width)
        // $("#canvas-borad").attr("height", configs.height)
        // $("#canvasimg").attr("width", configs.width)
        // $("#canvasimg").attr("height", configs.height)
        // $("#canvasimg").attr("src", this.src)
        // const rotate = dom.attr("class");
        // $("#preview").find("img").attr("src", dom.attr("src")).attr("class", rotate);
        $("#preview").addClass("show");
        // $("#preview img#canvasimg").show();
        // $("#preview").fadeIn(200);
        var canvas = $("#canvas-borad")[0];
        canvas.width = configs.width;
        canvas.height = configs.height;
        configs.context = canvas.getContext("2d");
        configs.context.rotate((0 * Math.PI) / 180)
        configs.context.drawImage(configs.image, 0, 0, configs.width, configs.height);
      };

      configs.deg = 0;
      $("#preview").on("click", "span", function () {
        if ($(this).hasClass("left")) {
          configs.deg -= 90
        } else if ($(this).hasClass("right")) {
          configs.deg += 90
        }
        if (configs.deg < 0) {
          configs.deg += 360
        } else if (configs.deg > 360) {
          configs.deg -= 360
        }
        if (configs.deg % 360 == 0) {
          $("#canvas-borad").attr("width", configs.width)
          $("#canvas-borad").attr("height", configs.height)
          configs.context.rotate((0 * Math.PI) / 180)
          configs.context.drawImage(configs.image, 0, 0, configs.width, configs.height);
        } else if (configs.deg % 360 == 90) {
          $("#canvas-borad").attr("width", configs.height)
          $("#canvas-borad").attr("height", configs.width)
          configs.context.rotate((90 * Math.PI) / 180)
          configs.context.drawImage(configs.image, 0, -configs.height, configs.width, configs.height);
        } else if (configs.deg % 360 == 180) {
          $("#canvas-borad").attr("width", configs.width)
          $("#canvas-borad").attr("height", configs.height)
          configs.context.rotate((180 * Math.PI) / 180)
          configs.context.drawImage(configs.image, -configs.width, -configs.height, configs.width, configs.height);
        } else if (configs.deg % 360 == 270) {
          $("#canvas-borad").attr("width", configs.height)
          $("#canvas-borad").attr("height", configs.width)
          configs.context.rotate((270 * Math.PI) / 180)
          configs.context.drawImage(configs.image, -configs.width, 0, configs.width, configs.height);
        }

        configs.context.save();
        $("#canvasimg").hide();
        return false
      })
    }
  }

  let configs = {
    img: new Image()
  };
  $("img[preview]").on("click", function () {
    new RotateImg({
      canvasId: "canvas-borad",
      img: $(this).attr("src")
    });
  });


  // let deg = 0;
  // $("#preview").on("click", "span", function () {
  // let width = $("#canvasimg").attr("width")
  // let height = $("#canvasimg").attr("height")
  // if ($(this).hasClass("left")) {
  //   deg -= 90
  // } else if ($(this).hasClass("right")) {
  //   deg += 90
  // }
  // $("#canvasimg").attr("height", width);
  // $("#canvasimg").attr("width", height);
  // if (deg % 360 == 0) {
  //   console.log(1)
  // } else if (deg % 270 == 0) {
  //   console.log(2)
  // } else if (deg % 180 == 0) {
  //   console.log(3)
  // } else if (deg % 90 == 0) {
  //   console.log(4)
  // $("#canvasimg").css({ "transform": "rotate(90deg) translate(100%)", "transform-origin": "0 0" })
  // }
  // let classname = $(this).siblings("img").attr("class");
  // if (classname) {
  //   rotateIndex = +classname.split("ratate")[1] || 0
  // }
  // if ($(this).hasClass("left")) {
  //   rotateIndex -= 1
  // } else if ($(this).hasClass("right")) {
  //   rotateIndex += 1
  // }
  // if (rotateIndex < 0) {
  //   rotateIndex = 3
  // }
  // rotateIndex = Math.abs(rotateIndex) % 4;
  // $(this).siblings("img").removeAttr("class").addClass("ratate" + rotateIndex)
  //   return false
  // })


  // $("#bj").on("click", function () {

  // })


  var inputs = $(".right ol").find("input");
  $.each(inputs, function (index, element) {
    element.oninput = function (el) {
      let num = 0;
      // if (!($(el.target).val() == "")) {
      //     num = +$(el.target).val();
      // }
      // if (num > 0) {
      //     $(el.target).val(num);
      // } else {
      //     $(el.target).val(0);
      // }
      getSum();
    };
  });
  getSum();
  function getSum() {
    var sum = 0;
    $.each(inputs, function (index, el) {
      if (index == 0) {
        sum = 0;
      }
      if (el.value >= 0) {
        sum += +el.value;
      }
      if (index == inputs.length - 1) {
        $(".right").find("p input").val(sum);
      }
    });
  }
  $(document).on("click", "button[type='submit']", function (e) {
    e = e || window.event;
    e.preventDefault();
    var form = $(this).parents('form');
    var action = form.attr("action");
    var type = form.attr("method");
    var content = form.serialize();

    $.ajax({
      url: action + "&t=" + Math.random(),
      type: type,
      dataType: 'json',
      data: content,
      header: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        'X-XXS-Protection': '1;mode=block',
        'X-Frame-Options': 'deny'
      },
      success: function success(data) {
        layer.msg("提交成功");
        setTimeout(function () {
          window.location.href = "/zsmanager/inter_student/cepin/";
        }, 2000)

      },
      error: function error() {
        layer.msg("提交失败");
      }
    });
  });



  // $("#xz").on("click", function () {
  //   const img_w = $("#canvasimg").width(),
  //     img_h = $("#canvasimg").height();
  //   // $("#canvasimg").rotate(90 * Math.PI / 180)
  //   $("#canvasimg").css({ "transform": "rotate(90deg)", "width": img_w, "height": img_h })
  //   // $("#canvas-borad").css({"width": img_h, "height": img_w })
  //   // $("#canvas-borad").css({"width": img_h, "height": img_w })
  // })
});


/**
 * Created by yangjian on 17-9-18.
 */
(function ($) {
  // 设置元素可用状态
  $.fn.enable = function () {
    $(this).addClass("active");
    $(this).removeAttr("disabled");
  }

  // 设置元素不可用状态
  $.fn.disable = function () {
    $(this).removeClass("active");
    $(this).attr("disabled", true);
  }

  var Canvas = function (options) {

    var configs = {
      width: 360,
      height: 300,
      img: options.img,
      save: function (data) {
      }
    }; //默认配置
    options = options || {};
    $.extend(configs, options);

    var canvas = $("#" + configs.canvasId)[0]; //画布
    canvas.width = configs.width;
    canvas.height = configs.height;
    var context = canvas.getContext("2d"); //绘图环境
    context.lineCap = "round";　//设置线条两端为圆弧
    context.lineJoin = "round";　//设置线条转折为圆弧
    //设置默认颜色
    setColor();
    var $prevBtn = $("#J_prevStep"); //上一步
    var $nextBtn = $("#J_nextStep"); //下一步
    var $clearBtn = $("#J_clearBoard"); //清空画板
    var drawing = false; //是否正在绘制
    var erasering = false; //是否正在擦除
    var prevSteps = []; //返回上一步操作集合
    var nextSteps = []; //恢复下一步操作集合
    var o = {}; //导出api对象

    $("#picBoard").css({
      width: configs.width + "px",
      height: configs.height + "px"
    });

    // 事件绑定
    canvas.onmousedown = startDrawing;
    canvas.onmouseup = stopDrawing;
    canvas.onmouseout = stopDrawing;
    canvas.onmousemove = doDrawing;
    $prevBtn.on("click", gotoPrevStep);
    $nextBtn.on("click", gotoNextStep);
    $clearBtn.on("click", clearBoard);

    // 清空设置
    $("#clearSetting").on("click", function () {
      context.lineWidth = 1;
      setColor($(".colorBar span:first").data("color"));
      context.shadowBlur = 0;
      alert("画笔已重新初始化，请重新配置画笔。");
    });

    //上传背景图片
    $("#J_canvas_bg").on("change", function () {

      if ($("#picBoard img").length > 0) {
        $("#picBoard img:eq(0)").attr("src", window.URL.createObjectURL(this.files[0]));
        return;
      }
      var $img = '<img src="' + window.URL.createObjectURL(this.files[0]) + '" width="' + configs.width + '" height="' + configs.height + '" />';
      $("#picBoard").append($img);

      // 激活删除背景按钮
      $("#J_removeImg").enable();

    });

    // 删除背景图片
    $("#J_removeImg").on("click", function () {
      $("#picBoard").empty();
      $(this).disable();
    });

    //保存图片
    $('#J_saveImg').on("click", saveImage);

    // 设置笔刷大小
    $("#scrawl-main .brush-size").on("click", function () {

      context.restore(); //恢复到canvas的上一个状态
      context.lineWidth = parseInt($(this).text());
      erasering = false;

    });

    // 设置笔触虚化
    $("#scrawl-main .blur-size").on("click", function () {
      context.shadowBlur = parseInt($(this).text());
    });

    // 橡皮擦功能
    $("#scrawl-main .eraser-size").on("click", function () {

      if (erasering == true) {
        return;
      }
      erasering = true;
      context.save(); //保存canvas状态
      context.lineCap = "round";　//设置线条两端为圆弧
      context.lineJoin = "round";　//设置线条转折为圆弧
      context.lineWidth = 10;
      context.globalCompositeOperation = "destination-out";

    });

    //设置颜色
    $("#scrawl-main .colorBar span").on("click", function () {

      $("#scrawl-main .colorBar .active").removeClass("active");
      $(this).addClass("active");
      setColor($(this).data("color"));
    });

    // 开始绘制
    function startDrawing(e) {
      drawing = true;
      //记录上一步的数据
      prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
      // 创建一个新的绘图路径
      context.beginPath();
      // 把画笔移动到鼠标位置
      var offset = $(canvas).offset();
      context.moveTo(e.pageX - offset.left, e.pageY - offset.top);
      if (typeof options.onDraw == "function") {
        options.onDraw({
          opt: "start",
          x: e.pageX - offset.left,
          y: e.pageY - offset.top,
        });
      }
    }

    // 停止绘制
    function stopDrawing() {

      drawing = false;
      //清空下一步的数据集合，从新开始记录
      nextSteps = [];
      $nextBtn.disable();
      if (prevSteps.length == 1) {
        $prevBtn.enable();
        $clearBtn.enable();
      }
    }

    //绘制图像
    function doDrawing(e) {
      if (drawing) {
        // 找到鼠标最新位置
        var offset = $(canvas).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        // 画一条直线到鼠标最新位置
        context.lineTo(x, y);
        context.stroke();
        if (typeof options.onDraw == "function") {
          options.onDraw({
            opt: "drawing",
            lineWidth: context.lineWidth,
            shadowBlur: context.shadowBlur,
            strokeStyle: context.strokeStyle,
            shadowColor: context.shadowColor,
            x: x,
            y: y,
          });
        }
      }
    }

    /**
     * 返回上一步操作
     */
    function gotoPrevStep() {
      if (prevSteps.length > 0) {
        //保存当前状态到下一步的操作历史库
        nextSteps.push(context.getImageData(0, 0, configs.width, configs.height));
        var popData = prevSteps.pop();
        context.putImageData(popData, 0, 0);
        $nextBtn.enable();

        if (prevSteps.length == 0) {
          $prevBtn.disable();
        }
      }
    }

    /**
     * 恢复下一步操作
     */
    function gotoNextStep() {
      if (nextSteps.length > 0) {
        //保存当前状态到上一步的操作历史库
        prevSteps.push(context.getImageData(0, 0, configs.width, configs.height));
        var imgData = nextSteps.pop();
        context.putImageData(imgData, 0, 0);
        $prevBtn.enable();

        if (nextSteps.length == 0) {
          $nextBtn.disable();
        }
      }
    }

    /**
     * 清空画板
     */
    function clearBoard() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      prevSteps = [];
      nextSteps = [];

      $prevBtn.disable();
      $nextBtn.disable();
      $clearBtn.disable();
    }

    /**
     * 设置画笔颜色
     * @param color
     */
    function rotate(deg) {
      // console.log(2132321);
      // context.rotate(90 * Math.PI / deg)
      // context.stroke();

      // context.translate(200, 200)
      // context.rotate(45 * Math.PI / 180)
      // context.translate(-200, -200)
      // context.fillStyle = "red"
      // context.fillRect(100, 100, 200, 200)
    }
    // const img_w = $("#canvasimg").width(),
    //   img_h = $("#canvasimg").height();
    // $("#xz").on("click", function () {
    //   // rotate(90)
    //   // $("#canvasimg").rotate(90 * Math.PI / 180)
    //   $("#canvasimg").css({ "transform": "rotate(90deg)", "width": img_w, "height": img_h })
    //   // $("#canvas-borad").css({"width": img_h, "height": img_w })
    //   // $("#canvas-borad").css({"width": img_h, "height": img_w })
    // })

    // 旋转
    function setColor(color) {
      if (!color) {
        color = $(".colorBar .active:eq(0)").data("color");
      }
      context.strokeStyle = color;
      context.shadowColor = color;
    }

    /**
     * 保存图片
     */
    // function saveImage() {

    //   if ($("#canvasimg").length > 0) {
    //     var image = new Image();
    //     image.src = $("#canvasimg").attr("src");
    //     image.onload = function () {
    //       context.save();
    //       context.shadowBlur = 0;
    //       context.shadowColor = '#FFF';
    //       context.globalCompositeOperation = "destination-atop";
    //       // debugger
    //       context.drawImage(this, 0, 0, configs.width, configs.height);
    //       context.restore();

    //       configs.save(canvas.toDataURL("image/png"));
    //     }

    //   } else {
    //     configs.save(canvas.toDataURL("image/png"));
    //   }
    // }

    // context
    // let rotate = 0;
    // $("#xz").on("click", function () {
    //   rotate += 90
    //   let img = new Image();
    //   img.src = $("#canvasimg").attr("src");
    //   img.onload = function () {
    //     let width = this.naturalWidth;
    //     let height = this.naturalHeight;
    //     $("#canvas-borad").attr("width", height)
    //     $("#canvas-borad").attr("height", width)
    //     // $("#canvasimg").css("rotate", Math.Ip / 180 * 90)
    //     // @ts-ignore
    //     // $("#canvasimg").attr("src", this.src)
    //     // const rotate = dom.attr("class");
    //     // $("#preview").find("img").attr("src", dom.attr("src")).attr("class", rotate);
    //     // $("#preview").addClass("show");
    //     // $("#preview").fadeIn(200);

    //     context.width = width
    //     context.height = height
    //     context.rotate((90 * Math.PI) / 180)
    //     context.drawImage(this, 0, -height, width, height);
    //     context.save();
    //     $("#canvasimg").hide();
    //   };
    // })

    // new Canvas({
    //   canvasId: "canvas-borad",
    //   width: height,
    //   height: width,
    //   save: function (data) {
    //     // $("#preview").hide();
    //     // dom.attr("src", data)
    //   }
    // });


    //要导出的API
    o.nextStep = gotoNextStep;
    o.prevStep = gotoNextStep;
    o.setColor = setColor;
    o.save = saveImage;
    o.onDraw = function (x, y) {

    }
    return o;
  }


  window.Canvas = Canvas;
})(jQuery);
$(".close").on("click", function () {
  $("#preview").hide()
  debugger
})